<template>
  <div class="clazzPage">
    <el-container>
      <el-header style="background-image: linear-gradient(to right, #8ac9e2, #80eff3)">
        <Header name="班级管理"></Header>
      </el-header>
      <el-main>
        <!-- 班级管理表格 -->
        <el-container>
          <el-header>
            <div class="header">
              <el-button type="success" icon="el-icon-edit"
                         @click="insertCLazzVisible = true" plain>添加班级
              </el-button>
              <el-button type="danger" icon="el-icon-delete"
                         @click="deleteClazzsVisible = true" plain>批量删除
              </el-button>
              <div class="search">
                <el-input v-model="searchContext" prefix-icon="el-icon-search"></el-input>
              </div>
            </div>
          </el-header>
          <el-main style="margin-top: -20px">
            <el-table :data="data" @selection-change="handleDeleteSelectionChange"
                      :row-class-name="tableRowClassName"
                      style="width: 100%; position: relative" size="small" border>
              <el-table-column type="selection" width="50" align="center"></el-table-column>
              <el-table-column label="序号" prop="id" width="100" align="center"></el-table-column>
              <el-table-column label="班级名称" prop="name" width="200" align="center"></el-table-column>
              <el-table-column label="学院名称" prop="major" width="180" align="center"></el-table-column>
              <el-table-column label="学校名称" prop="school" width="180"
                               align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <div>
                    <el-button type="primary" icon="el-icon-search"
                               @click="handleStartListStudent(scope.row.id)"
                               size="small"
                               plain>详情
                    </el-button>
                    <el-button type="warning" icon="el-icon-edit"
                               @click="handleStartUpdate(scope.row)"
                               size="small"
                               style="margin-left: 20px"
                               plain>修改
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete"
                               @click="handleStartDelete(scope.row)"
                               size="small"
                               style="margin-left: 20px"
                               plain>删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
        <el-footer>
          <!-- 分页 -->
          <div class="clazzPagination">
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="clazzData.length">
            </el-pagination>
          </div>
        </el-footer>
      </el-main>
    </el-container>

    <!-- 添加Dialog -->
    <el-dialog title="添加" :visible.sync="insertCLazzVisible" width="45%" center>
      <el-form :model="insertClazzForm">
        <el-form-item label="班级名称" label-width="120px">
          <el-input v-model="insertClazzForm.name" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="学院名称" label-width="120px">
          <el-input v-model="insertClazzForm.major" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="学校名称" label-width="120px">
          <el-input v-model="insertClazzForm.school" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertCLazzVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndInsert">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改Dialog -->
    <el-dialog title="修改" :visible.sync="updateClazzVisible" width="45%" center>
      <el-form :model="updateClazzForm">
        <el-form-item label="班级名称" label-width="120px">
          <el-input v-model="updateClazzForm.name" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="学院名称" label-width="120px">
          <el-input v-model="updateClazzForm.major" auto-complete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="学校名称" label-width="120px">
          <el-input v-model="updateClazzForm.school" auto-complete="off" style="width: 320px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateClazzVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除Dialog -->
    <el-dialog title="删除" :visible.sync="deleteClazzVisible" width="35%" center>
      <span>删除不可恢复, 确认修改?</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteClazzVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndDelete">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 批量删除Dialog -->
    <el-dialog title="批量删除" :visible.sync="deleteClazzsVisible" width="35%" center>
      <span>删除不可回复, 确认删除?</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteClazzsVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEndDeleteMany">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from '../components/Header'

export default {
  name: "ClazzPage",
  components: {Header},
  data() {
    return {
      clazzData: [], // 存放真实class信息的数组
      tempData: [], // 存放临时class信息的数组
      searchContext: '', // 搜索内容
      currentPage: 1, // 当前页
      pageSize: 6, // 每页记录数量
      isCollapse: true, // 侧边栏是否缩放

      insertCLazzVisible: false, // 启动添加Dialog的信号量
      updateClazzVisible: false, // 启动修改Dialog的信号量
      deleteClazzVisible: false, // 启动删除Dialog的信号量
      deleteClazzsVisible: false, // 启动批量删除Dialog的信号量

      isDelete: 0, // 标识删除的列
      deleteSelection: [], // 标识多个删除的列
      insertClazzForm: {
        name: '',
        major: '',
        school: ''
      }, // 添加表单
      updateClazzForm: {
        id: 0,
        name: '',
        major: '',
        school: ''
      }  // 修改表单
    }
  },
  created() {
    this.getClazzData()
  },
  watch: {
    searchContext: function () {
      if (!this.clazzData) {
        this.clazzData = this.tempData
      } else {
        this.clazzData = []
        for (const element of this.tempData) {
          if (element.name.includes(this.searchContext)) {
            this.clazzData.push(element)
          }
        }
      }
    }
  },
  computed: {
    data() {
      return this.clazzData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else if (rowIndex % 2 === 1) {
        return 'success-row';
      }
    },
    async getClazzData() {
      const {data} = await this.$axios.get(`/clazz/`)
      if (data.code) {
        this.clazzData = data.data
        this.tempData = data.data
      }
    },

    handleStartUpdate(row) {
      this.updateClazzForm.id = row.id
      this.updateClazzForm.name = row.name
      this.updateClazzForm.major = row.major
      this.updateClazzForm.school = row.school
      this.updateClazzVisible = true
    },
    handleStartDelete(row) {
      this.isDelete = row.id
      this.deleteClazzVisible = true
    },
    handleStartListStudent(id) {
      this.$router.push({
        path: '/student',
        query: {
          id
        }
      })
    },
    handleDeleteSelectionChange(val) {
      this.deleteSelection = val;
    },

    async handleEndInsert() {
      let params = new URLSearchParams()
      params.append("name", this.insertClazzForm.name)
      params.append("major", this.insertClazzForm.major)
      params.append("school", this.insertClazzForm.school)
      const {data} = await this.$axios.post(`/clazz/put`, params)
      if (data.code) {
        await this.getClazzData()
        this.$notify({
          title: '成功',
          message: data.message,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '失败',
          message: data.message,
          type: 'warning'
        })
      }
      this.insertClazzForm = {}
      this.insertCLazzVisible = false
    },
    async handleEndUpdate() {
      let params = new URLSearchParams()
      params.append("id", this.updateClazzForm.id)
      params.append("name", this.updateClazzForm.name)
      params.append("major", this.updateClazzForm.major)
      params.append("school", this.updateClazzForm.school)
      const {data} = await this.$axios.put(`/clazz/put`, params)
      if (data.code) {
        await this.getClazzData()
        this.$notify({
          title: '成功',
          message: data.message,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '失败',
          message: data.message,
          type: 'warning'
        })
      }
      this.updateClazzVisible = false
    },
    async handleEndDelete() {
      const {data} = await this.$axios.delete(`/clazz/${this.isDelete}`)
      if (data.code) {
        await this.getClazzData()
        this.$notify({
          title: '成功',
          message: data.message,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '失败',
          message: data.message,
          type: 'warning'
        })
      }
      this.deleteClazzVisible = false
    },
    async handleEndDeleteMany() {
      for (const deleted of this.deleteSelection) {
        const {data} = await this.$axios.delete(`/clazz/${deleted.id}`)
        if (data.code) {
          this.$notify({
            title: '成功',
            message: data.message,
            type: 'success'
          })
        } else {
          this.$notify({
            title: '失败',
            message: data.message,
            type: 'warning'
          })
        }
      }
      await this.getClazzData()
      this.deleteClazzsVisible = false
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.el-table .warning-row {
  background: #f8f6f6;
}

.el-table .success-row {
  background: #f1f1f1;
}

.header {
  margin-top: 5px;
}

.search {
  width: 335px;
  float: right;
}

.clazzPagination {
  position: absolute;
  top: 88%;
  right: 2%;
}
</style>
